<template>
  <div id="app">
    <vue-p5 v-on="this"></vue-p5>
  </div>
</template>

<script>
import VueP5 from 'vue-p5'

// var rs = [200, 250, 300, 100]
// var thetas = [0.0, 0.0, 0.0, 0.0]
// var vs = [0, 0.03, 0.04, 0.00]
// var Nums = 200

// function setup() {

// }

// function draw() {
//   background(0)
//   translate(width / 2, height / 2)
//   for (var i = 0; i < Nums; i++) {
//     xs = []
//     ys = []
//     for (var k = 0; k < 4; k++) {
//       thetas[k] += vs[k] / Nums
//       theta = thetas[k] + TWO_PI / Nums * i
//       xs.push(cos(theta) * rs[k])
//       ys.push(sin(theta) * rs[k])
//       stroke(255 / Nums * i, 255 - 255 / Nums * i, 0, 150)
//       bezier(xs[1], ys[1], xs[2], ys[2], xs[3], ys[3], xs[0], ys[0])
//       stroke(255 / Nums * i, 255 / Nums * i, 0, 150)
//       bezier(xs[1], ys[1], xs[3], ys[3], xs[2], ys[2], xs[0], ys[0])
//     }
//   }
// }

export default {
  methods: {
    setup(sketch) {
      // sketch.createCanvas(800, 800)
      // sketch.noFill()
      // sketch.stroke(255, 150)
      sketch.background('green')
      sketch.text('Hello p5!', 20, 20)
    }
  },
  render(h) {
    return h(VueP5, { on: this })
  }
}
</script>
